<template>
	<view class="editAddress u-p-t-20">
		<view class="box u-p-30">
			<view class="item u-flex">
				<label class="lab">收货人</label>
				<input type="text" value="" placeholder="请输入收货人姓名" class="text" />
			</view>
			<view class="item u-flex">
				<label class="lab">手机号码</label>
				<input type="text" value="" placeholder="请输入收货人手机号码" class="text" />
			</view>
			<view class="item u-flex">
				<label class="lab">所在地区</label>
				<view class="info u-flex u-row-between">
					<AddressPicker @change="change" :level="3" class="addes">{{planLocate}}</AddressPicker>
					<u-icon class="u-m-l-20" name="arrow-right" color="#dadada" size="28"></u-icon>
				</view>
			</view>
			<view class="item u-flex">
				<label class="lab">详细地址</label>
				<input type="text" value="" placeholder="请详细地址，如道路，门票" class="text" />
			</view>
			
			<view class="u-m-t-30 u-flex u-row-between">
				<label>
					<view class="sub u-m-b-10">设置默认地址</view>
					<text class="des">提醒：每次下单会默认推荐该地址</text>
				</label>
				<u-switch v-model="isDefault" @change="switchChange" :size="40" active-color="#de4f38"></u-switch>
			</view>
			<view class="u-m-t-60 btn"><u-button hover-class="none" class="send" type="warning" shape="circle">确认</u-button></view>
		</view>
	</view>
</template>

<script>
	import AddressPicker from "@/components/AddressPicker/AddressPicker.vue"
	export default{
		name : 'editAddress',
		data(){
			return{
				isDefault : false,
				planLocate:'请选择地址',
			}
		},
		methods:{
			//父组件的获取子组件传递的值， 在为josn 有code和name
			change(result) { 
				console.log(JSON.stringify(result.data)); 
				this.planLocate = ''; 
				result.data.forEach((item,index) =>{ 
					if(index===0){ 
						this.planLocate += item.name 
					}else{ 
						this.planLocate += '-' +item.name 
					} 
				}) ; 
				let arr =this.planLocate.split('-'); console.log(arr) 
			}, 
			switchChange(status) {
				console.log(status);
			},
		},
		onLoad() {
			/*  */
		},
		onShow(){
			
		},
	}
</script>

<style scoped lang="scss">
.editAddress{
	
	.box{
		background: #fff;
	}
	.item{
		height: 120rpx;
		border-bottom: 1px solid #eee;
		.lab{
			width: 140rpx;
		}
		.text{
			font-size: 28rpx;
			width: 80%; height:80rpx; line-height: 80rpx; 
		}
		.addes{ color:grey; width: 80%; height:80rpx; line-height: 80rpx; }
		.info{ width: 80%; }
	}
	.des{ color:#666; font-size: 26rpx; }
	
	.btn{
		width: 80%;
		position: fixed;
		bottom: 140rpx;
		left: 50%;
		margin-left: -40%;
		.send{
			background-color: #de4f38;
		}
	}
	
}
</style>
